x
<template>
  <div>
    <pure-table
      row-key="id"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :loading-config="loadingConfig"
      :pagination="pagination"
      @page-size-change="onSizeChange"
      @page-current-change="onCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <template #operation="{ row }">
        <el-button link type="primary" size="small" @click="handleClick(row)">
          Detail
        </el-button>
        <el-button link type="primary" size="small">Edit</el-button>
      </template>
    </pure-table>
  </div>
</template>
<script setup lang="ts">
import { useColumns } from "./columns";
import { getTableDataApi } from "@/api/table";
import { onMounted } from "vue";

const {
  columns,
  dataList,
  select,
  loading,
  loadingConfig,
  pagination,
  handleSelectionChange,
  multipleSelection
} = useColumns();
// onCurrentChange,
// onSizeChange,
select.value = false;
loading.value = false;
columns.value = [
  {
    type: "selection",
    align: "left",
    hide: () => true
  },
  {
    label: "ID",
    prop: "id"
  },
  {
    label: "日期",
    prop: "date"
  },
  {
    label: "姓名",
    prop: "name"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];

const onSizeChange = val => {
  getTableData({ page: val });
};
const onCurrentChange = val => {
  loadingConfig.text = `正在加载第${val}页...`;
  loading.value = true;
  getTableData({ page: val });
};
const handleClick = row => {
  console.log(row.date);
  console.log(multipleSelection);
  multipleSelection.value.map(res => {
    console.log(res.id);
  });
};
const getTableData = params => {
  getTableDataApi(params).then(({ data }) => {
    dataList.value = data.list;
    pagination.total = data.total;
    loading.value = false;
  });
};
onMounted(() => {
  console.log("onMounted");
  getTableData({});
});
</script>
